Tooltip Guidelines工具提示設計指南

工具提示是一種使用者觸發的資訊框，用於為頁面元素或功能提供額外資訊。然而，工具提示經常被錯誤使用，導致使用者體驗受損。

什麼是工具提示？

定義：工具提示是當使用者與圖形使用者介面（GUI）中的某個元素互動時出現的簡簡訊息框。它通常透過以下方式觸發：

• 滑鼠懸停

• 鍵盤懸停（將焦點保持在某元素上較長時間）。

• 工具提示通常附加在活動元素（如圖示、文字連結、按鈕）上，提供該元素的上下文資訊，而不是解釋整個任務流程。

注意：工具提示是使用者觸發的，不能用於觸屏裝置，後者通常採用彈出提示（Popup Tips）來代替。

工具提示與彈出提示的對比

工具提示使用指南

1. 不要將關鍵資訊放入工具提示

使用者不應依賴工具提示完成任務。工具提示適合補充說明，而非提供關鍵性或直接可操作的資訊。

錯誤示例：Amtrak將密碼要求放入工具提示中，這些資訊對完成表單至關重要，應直接顯示在頁面上。

正確示例：FedEx在欄位旁使用工具提示，解釋為何需要使用者提供電子郵件地址。

2. 工具提示內容應簡短且有幫助

避免顯而易見或冗餘的資訊。無用的提示會增加介面噪音。

工具提示是微內容，需簡短明瞭，不應阻礙相關內容的顯示。

錯誤示例：Sprint的按鈕“Add New Line”有相同文字的工具提示，造成不必要的重複。

正確示例：Alibaba在搜尋欄的未標註攝像頭圖示上使用工具提示，解釋其功能為“以圖搜圖”。

3. 支援滑鼠和鍵盤懸停

確保工具提示對依賴鍵盤操作的使用者可用。

錯誤示例：McDonalds網站僅支援滑鼠懸停觸發工具提示，鍵盤使用者無法訪問相關資訊。

正確示例：Wikipedia同時支援滑鼠和鍵盤懸停觸發工具提示。

4. 多元素相鄰時使用箭頭指示關聯性

箭頭可以明確工具提示與對應元素的關聯，避免使用者混淆。

錯誤示例：PowerPoint介面中多個圖示相鄰，缺乏箭頭的工具提示讓使用者難以判斷提示關聯的元素。

正確示例：Witeboard使用箭頭標識工具提示的關聯元素，即使圖示間距較大，也提高了清晰度。

5. 全站保持工具提示的一致性

工具提示本身難以發現，因此需要在站點內統一使用。如果某些元素不需要工具提示，建議使用彈出提示代替。

錯誤示例：Business Insider只為導航選單中的部分圖示提供工具提示，造成不一致的使用者體驗。

正確示例：Todoist為所有主要圖示提供一致的工具提示，滿足使用者預期，增強信任感。

其他建議

為未標註的圖示提供工具提示：圖示通常帶有模糊性，若無文字標籤，應至少為其配備描述性的工具提示。

確保工具提示與背景有足夠對比度：工具提示的文字應易於識別，特別是對於視覺障礙使用者。避免淺灰色工具提示在白色頁面上難以閱讀。

避免工具提示遮擋相關內容：工具提示不應覆蓋其關聯的資訊，避免使用者為檢視完整資訊而重複操作。

工具提示是一種使用者備用的輔助工具，而不是核心的任務資訊來源。

關鍵資訊應直接顯示在頁面上，而不是隱藏在工具提示中。

過度簡約設計會增加工具提示的需求，但這也加重了使用者負擔。

在使用工具提示前，應問自己：提示中的資訊是否對完成任務至關重要？如果答案是“是”，請直接顯示在頁面上；如果答案是“否”，工具提示可以作為補充說明。